import { Card, List, Space, Tag, Tooltip } from "antd";
import { Link } from "@umijs/max";
import { css } from "@emotion/react";
import { ImportOutlined, } from "@ant-design/icons";
import { Fragment } from "react";
import Rate from "@/components/Rate";
import Marquee from "react-fast-marquee";
import MustLogin from "@/components/MustLogin";
import Avatar from "@/components/Avatar";
import { completeImgUrl } from "common/utils/utils";

export default function Item({
  item,
}: {
  item: API.EQOpenResult,
}) {
  return <Link to={{
    pathname: `/mixer/${item.uuid}`
  }} target="_blank">
    <List.Item
      className="cursor-pointer"
    >
      <Card hoverable bordered={false} actions={[
        <MustLogin key="copy">
          <Link to={{
            pathname: '/personal/mixer',
            search: `?createFromUuid=${item.uuid}`
          }} target="_blank">
            <Space className="hover-primary" style={{
              color: 'rgba(0, 0, 0, 0.88)'
            }}>
              <ImportOutlined />
              <span>导入到我的调音空间试听</span>
            </Space>
          </Link>
        </MustLogin>
      ]} styles={{
        body: {
          padding: 16
        }
      }}>
        <Card.Meta
          title={
            // <div className="flex gap-[8px]">
            //   <Avatar
            //     size={30}
            //     showUserName
            //     userName={item.user.name}
            //     src={completeImgUrl(item.user.avatar, '?x-oss-process=image/resize,m_fill,w_50,h_50')}
            //   />
              <Tooltip title={item.name}>
                <div className="flex-1 min-w-0 text-ellipsis line-clamp-2 whitespace-normal h-[50px]">{item.name}</div>
              </Tooltip>
            // </div>
          }
          description={
            <Fragment>
              <div className="overflow-hidden" css={css`
             &>.ant-tag{
               margin-bottom: 8px;
             }
            `}>
                <Rate.Tag bizUuid={item.uuid} />
                <Tag color="volcano" bordered={false}>
                  <Marquee pauseOnHover>
                    基于{`【${item.evaluation.brand.title}】${item.evaluation.title} - ${item.dataGroup}`}
                  </Marquee>
                </Tag>
              </div>
              <div className="flex gap-[8px]">
                <div className="text-ellipsis line-clamp-3 h-[66px] flex-1 min-w-0" title={item.desc}>{item.desc}</div>
                <Avatar
                  size={46}
                  showUserName
                  userName={item.user.name}
                  src={completeImgUrl(item.user.avatar, '?x-oss-process=image/resize,m_fill,w_50,h_50')}
                />
              </div>
            </Fragment>
          }
        />
      </Card>
    </List.Item>
  </Link>
}
